<template>
  <div style="margin-top: 20px">
    <el-row>
      <el-input v-model="input" placeholder="请输入姓名" style="width: 300px"></el-input>&nbsp;
      <el-button type="primary" @click="handleSearch" icon="el-icon-search">查询</el-button>
      <el-button @click="dialogFormVisible = true" type="warning" icon="el-icon-circle-plus-outline">新增</el-button>
    </el-row>
    <br />
    <div>
      <el-table
        v-loading="loading"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        border>
        <el-table-column
          prop="id"
          label="项目编号"
          width="120"
          v-if="false">
        </el-table-column>
        <el-table-column
          prop="code"
          label="项目编码"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="项目名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="type"
          label="项目类型"
          width="120">
        </el-table-column>

        <el-table-column
          prop="sex"
          label="适用性别"
          width="120">
        </el-table-column>
        <el-table-column
          prop="age"
          label="适用年龄"
          width="120">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="120">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="项目说明"
          width="300">
        </el-table-column>
        <el-table-column
          prop="attention"
          label="注意事项"
          width="300">
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="300">
          <template v-slot="scope">
            <el-button @click="Updates(scope.row.id)" type="warning" size="small" icon="el-icon-edit">编辑</el-button>
            <el-button @click="deleteRow(scope.row.id)" type="danger" size="small" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length">
      </el-pagination>
    </div>
    <div>
      <el-dialog title="添加检测项" :before-close="openUAdd" :visible.sync="dialogFormVisible">

          <el-tabs  v-model="activeName" type="card" @tab-click="addhandleClick">
            <el-tab-pane label="基本信息" name="first">
              <el-form :inline="true" :model="form" class="demo-form-inline">


                <el-form-item label="项目编号"  style="width: 45%;" class="custom-margin">
                  <el-input v-model="form.code"
                            autocomplete="off"
                            placeholder="项目编号"
                            style="margin-left: 20px;"
                            class="custom-input "></el-input>
                </el-form-item>



                <el-form-item label="项目名称" class="custom-margin" style="width: 40%">
                  <el-input v-model="form.name"
                            autocomplete="off"
                            placeholder="项目名称"

                            style="margin-left: 20px;"
                            class="custom-input "></el-input>
                </el-form-item>

                <el-form-item label="适用性别" class="custom-margin" style="width:45%">
                  <el-select v-model="form.sex"
                             placeholder="不限"
                             style="margin-left: 20px;"
                             class="custom-input "
                             clearable >
                    <el-option label="不限" value="0"></el-option>
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="项目类型" class="custom-margin" style="width: 45%">
                  <el-input v-model="form.type" autocomplete="off" style="margin-left: 20px;" class="custom-input "></el-input>
                </el-form-item>
                <el-form-item label="项目价格" class="custom-margin" style="width: 45%">
                  <el-input v-model="form.price" autocomplete="off" style="margin-left: 20px;" class="custom-input "></el-input>
                </el-form-item>
                <el-form-item label="成本价" class="custom-margin" style="width: 45%">
                  <el-input v-model="form.costprice" autocomplete="off" style="margin-left: 20px;" class="custom-input "></el-input>
                </el-form-item>
                <el-form-item label="年龄下限" class="custom-margin" style="width: 45%">
                  <el-input v-model="form.agexx" autocomplete="off" style="margin-left: 20px;" class="custom-input "></el-input>
                </el-form-item>
                <el-form-item label="年龄上限" class="custom-margin" style="width: 45%">
                  <el-input v-model="form.agesx" autocomplete="off" style="margin-left: 20px;" class="custom-input "></el-input>
                </el-form-item>
                <el-form-item label="注意事项" class="custom-margin" style="width: 45%">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder=""
                    v-model="form.attention"
                    style="margin-left: 20px;"
                    class="custom-input ">
                  </el-input>
                </el-form-item>
                <el-form-item label="项目说明" class="custom-margin" style="width: 45%">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder=""
                    v-model="form.remark"
                    style="margin-left: 20px;"
                    class="custom-input ">
                  </el-input>
                </el-form-item>


              </el-form>
            </el-tab-pane>
          </el-tabs>
        <div slot="footer" class="dialog-footer">
          <el-button @click="openUAdd()">取 消</el-button>
          <el-button type="primary" @click="openOk();dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="修改" :before-close="openUpdate" :visible.sync="UpdateData">

        <el-form :inline="true" :model="updateform" class="demo-form-inline">


          <el-form-item label="项目编号"  style="width: 45%;" class="custom-margin">
            <el-input v-model="updateform.code"
                      autocomplete="off"
                      placeholder="项目编号"
                      style="margin-left: 20px;"
                      class="custom-input "></el-input>
          </el-form-item>



          <el-form-item label="项目名称" class="custom-margin" style="width: 40%">
            <el-input v-model="updateform.name"
                      autocomplete="off"
                      placeholder="项目名称"

                      style="margin-left: 20px;"
                      class="custom-input "></el-input>
          </el-form-item>

          <el-form-item label="适用性别" class="custom-margin" style="width:45%">
            <el-select v-model="updateform.sex"
                       placeholder="不限"
                       style="margin-left: 20px;"
                       class="custom-input "
                       clearable >
              <el-option label="不限" value="0"></el-option>
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="项目类型" class="custom-margin" style="width: 45%">
            <el-input v-model="updateform.type" autocomplete="off" style="margin-left: 20px;" class="custom-input "></el-input>
          </el-form-item>
          <el-form-item label="项目价格" class="custom-margin" style="width: 45%">
            <el-input v-model="updateform.price" autocomplete="off" style="margin-left: 20px;" class="custom-input "></el-input>
          </el-form-item>
          <el-form-item label="成本价" class="custom-margin" style="width: 45%">
            <el-input v-model="updateform.costprice" autocomplete="off" style="margin-left: 20px;" class="custom-input "></el-input>
          </el-form-item>
          <el-form-item label="年龄下限" class="custom-margin" style="width: 45%">
            <el-input v-model="updateform.agexx" autocomplete="off" style="margin-left: 20px;" class="custom-input "></el-input>
          </el-form-item>
          <el-form-item label="年龄上限" class="custom-margin" style="width: 45%">
            <el-input v-model="updateform.agesx" autocomplete="off" style="margin-left: 20px;" class="custom-input "></el-input>
          </el-form-item>
          <el-form-item label="注意事项" class="custom-margin" style="width: 45%">
            <el-input
              type="textarea"
              :rows="2"
              placeholder=""
              v-model="updateform.attention"
              style="margin-left: 20px;"
              class="custom-input ">
            </el-input>
          </el-form-item>
          <el-form-item label="项目说明" class="custom-margin" style="width: 45%">
            <el-input
              type="textarea"
              :rows="2"
              placeholder=""
              v-model="updateform.remark"
              style="margin-left: 20px;"
              class="custom-input ">
            </el-input>
          </el-form-item>


        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="openUpdate()">取 消</el-button>
          <el-button type="primary" @click="xgopenOk();UpdateData = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>

</template>



<script>

import axios from "axios";


export default {

  beforeCreate() {
    console.log('beforeCreate: 页面加载前执行方法')
    axios.get('api/checkitem/findAll').then(res => {
      console.log(res)
      this.tableData1=res.data.data;
      this.tableData = res.data.data
      console.log(this.tableData.length)
      console.log("666")

    })
  },


  mounted() {
    this.totalNum = this.tableData.length;
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      this.pageSize = val
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage=val;
      console.log(`当前页: ${val}`);
    },
    handleSizeChanges(val) {
      this.pageSizes = val
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChanges(val) {
      this.currentPages=val;
      console.log(`当前页: ${val}`);
    },
    deleteRow(id) {
      alert(id);

      axios.post('api/checkitem/scjcx', {
        id: id,
      }).then(res => {
        console.log(res.data.data);
        alert(res.data.data);

        this.tableData = [];
        this.tableData1 = [];
        this.cxsytc();
      });

    },
    cxsytc() {

      axios.get('api/checkitem/findAll').then(res => {
        console.log(res)
        this.tableData = res.data.data
        this.tableData1 = res.data.data

        console.log(this.tableData.length)
      })
    }
    , open() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    Updates(id){

      console.log("编辑id===="+id);

      this.UpdateData = true;
      let data = this.tableData.find((da)=>da.id === id);
      console.log("data===="+data.name);

      this.updateform.id = data.id;
      this.updateform.code = data.code;
      this.updateform.name = data.name;
      this.updateform.sex = data.sex;

      let ageLimits = data.age.split("-");
      let lowerLimit = parseInt(ageLimits[0]);//年龄下限
      let upperLimit = parseInt(ageLimits[1]);//年龄上限
      this.updateform.agexx=lowerLimit;
      this.updateform.agesx=upperLimit;

      this.updateform.price = data.price;
      this.updateform.costprice = 200;
      this.updateform.type = data.type;
      this.updateform.attention = data.attention;
      this.updateform.remark = data.remark;

    },
    openUpdate() {
      this.$confirm('是否退出修改?', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '取消',
        cancelButtonText: '退出'
      })
        .then(() => {
          this.$message({
            type: 'info',
            message: '放弃退出,继续修改'
          });
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel'
              ? '放弃修改并离开页面'
              : '停留在当前页面'
          })
          if(action!=='close') {
            this.UpdateData = false
            this.updateform = {};

          }
        });
    },
    openUAdd() {
      this.$confirm('是否退出添加?', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '取消',
        cancelButtonText: '退出'
      })
        .then(() => {
          this.$message({
            type: 'info',
            message: '放弃退出,继续添加'
          });
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel'
              ? '放弃添加并离开页面'
              : '停留在当前页面'
          })
          if(action!=='close') {
            this.dialogFormVisible = false
            this.form = {};

          }
        });
    },
    handleSearch() { // 搜索按钮点击事件
      console.log("获取输入框的值====="+this.input);

      this.tableData=this.tableData1;
      let listtable=[];
      if(this.input) {
        this.tableData.filter((item) => {

          console.log("套餐名称======="+item.name);

          if(item.name.indexOf(this.input)!==-1){

            listtable.push(item)
          }


        })
      }
      else{
        this.cxsytc();
      }
      console.log("搜索结果======="+listtable);

      this.tableData=listtable;

    },
    opensaves() {
      this.$confirm('是否退出保存?', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '取消',
        cancelButtonText: '退出'
      })
        .then(() => {
          this.$message({
            type: 'info',
            message: '放弃退出'
          });
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel'
              ? '放弃保存并离开页面'
              : '停留在当前页面'
          })
          if(action!=='close') {
            this.opensave = false
          }
        });
    },
    openOk(){
      // 发送POST请求，提交表单数据
      axios.post('/api/checkitem/tjjcx', this.form)
        .then(response => {
          // 处理提交成功的逻辑
          this.dialogFormVisible = false; // 关闭弹窗
          this.$message.success('提交成功');

          this.form = {};
          this.tableData = [];
          this.tableData1 = [];
          this.cxsytc();
        })
        .catch(error => {
          // 处理提交失败的逻辑
          this.$message.error('提交失败');
        });


    },
    xgopenOk(){
      // 发送POST请求，提交表单数据
      axios.post('/api/checkitem/xgjcx', this.updateform)
        .then(response => {
          // 处理提交成功的逻辑
          this.dialogFormVisible = false; // 关闭弹窗
          this.$message.success('提交成功');

          this.updateform = {};
          this.tableData = [];
          this.tableData1 = [];
          this.cxsytc();
        })
        .catch(error => {
          // 处理提交失败的逻辑
          this.$message.error('提交失败');
        });


    }
  },
  data() {
    return {
      currentPage: 1,
      jkgl:'',
      checkList: [],
      activeName: 'first',
      currentPage4:1,
      formLabelWidth:'120px',
      opensave: false,
      UpdateData:false,
      dialogFormVisible:false,

      input:'',
      pageSize: 5,
      totalNum:10,
      currentPages: 1,
      inputs:'',
      pageSizes: 5,
      totalNums:10,
      jkglsoptions:[{
        jkgl: '选项1',
        label: '黄金糕'
      }, {
        jkgl: '选项2',
        label: '双皮奶'
      }, {
        jkgl: '选项3',
        label: '蚵仔煎'
      }, {
        jkgl: '选项4',
        label: '龙须面'
      }, {
        jkgl: '选项5',
        label: '北京烤鸭'
      }],
      updateform:
        {
          id:'',
          code:'',
          name:'',
          sex:'',
          agexx:'',
          agesx:'',
          price:'',
          costprice:'',
          type:'',
          attention:'',
          remark:'',
        },

      form:{

        code:'',
        name:'',
        sex:'',
        agexx:'',
        agesx:'',
        price:'',
        costprice:'',
        type:'',
        attention:'',
        remark:'',


      },

      tableData: [],
      tableData1: [],

      loading: false
    }
  }
}
</script>
